<template>
  <div style="padding-bottom: 50px">
    <el-card>
      <el-row>
        <el-button type="primary" @click="goAddpage">添加商品</el-button>
      </el-row>

      <el-table :data="state.goodslist" border stripe v-loading="state.loading">
        <el-table-column
          label="序号"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          label="商品SPUID"
          prop="id"
          align="center"
        ></el-table-column>
        <el-table-column label="商品" align="center">
          <template v-slot="scope">
            <img :src="scope.row.picUrl" style="width: 120px" alt="" />
          </template>
        </el-table-column>
        <el-table-column
          label="商品分类"
          prop="cateName"
          align="center"
        ></el-table-column>
        <el-table-column label="规格" prop="maxPrice" align="center">
          <template v-slot="scope">
            <div v-if="scope.row.skus > 1">111</div>
          </template>
        </el-table-column>
        <el-table-column label="SKUID" prop="" align="center"></el-table-column>
        <el-table-column
          label="销售单价"
          prop=""
          align="center"
        ></el-table-column>
        <el-table-column label="货主" prop="" align="center"></el-table-column>
        <el-table-column label="来源" prop="" align="center"></el-table-column>
        <el-table-column
          label="状态"
          prop="saleStatus"
          align="center"
        ></el-table-column>
        <el-table-column
          label="上架时间"
          prop="onShelvesTime"
          align="center"
        ></el-table-column>
        <el-table-column
          label="下架时间"
          prop="offShelvesTime"
          align="center"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          align="center"
        ></el-table-column>
        <el-table-column
          label="商城链接"
          prop="updateTime"
          align="center"
        ></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="state.queryInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="state.queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.total"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { ElMessage } from 'element-plus'
export default {
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      loading: false,
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        skuFlag: true,
        storeId: 10104
      },
      goodslist: [],
      total: 0
    })
    const getGoodsList = async () => {
      const res = await proxy.$http.post('/operation/xhr/product/list', state.queryInfo)
      console.log(res);
      if (res.data.code !== 200) {
        ElMessage({
          message: '获取商品列表失败！',
          type: 'error'
        })
      }
      ElMessage({
        // showClose: true,
        message: '获取商品列表成功！',
        type: 'success'
      })
      state.goodslist = res.data.data.list
      state.total = res.data.data.total
    }
    const handleSizeChange = async (newSize) => {
      state.queryInfo.pageSize = newSize
      state.loading = true
      await getGoodsList()
      state.loading = false
    }
    const handleCurrentChange = async (newPage) => {
      state.queryInfo.pageNum = newPage
      state.loading = true
      await getGoodsList()
      state.loading = false
    }
    const goAddpage = () => {
      proxy.$router.push('/add')
    }
    onMounted(async () => {
      state.loading = true
      await getGoodsList()
      state.loading = false
    })
    return {
      state,
      getGoodsList,
      goAddpage,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>


<style scoped lang="less">
.el-card {
  width: 1300px;
  margin: 50px auto 0;
}
.el-pagination {
  margin-top: 30px;
}
</style>